<template>
	<view class="ccMyNum">
		<!-- <text class="ccMyNum-title">{{title}}</text> -->
		<view class="numBox">
			<view class="ccMyNumBox" :class="{'disabled': isOutOfStock}">
				<text @click="isOutOfStock ? null : minus()" :class="{'disabled': isOutOfStock}">-</text>
				<view>{{num}}</view>
				<text @click="isOutOfStock ? null : add()" :class="{'disabled': isOutOfStock}">+</text>
			</view>
			<view v-if="isSetMax" class="stock" :class="{'out-of-stock': isOutOfStock}">
				(库存:<text>{{maxNum}}</text>件)</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1
			}
		},
		created() {

		},


		methods: {
			minus() {
				// 检查库存是否为0
				const maxNum = parseInt(this.maxNum) || 0;
				if (maxNum <= 0) {
					uni.showToast({
						title: '商品库存不足',
						'icon': 'none'
					});
					return;
				}
				
				if (this.num <= 1) {
					uni.showToast({
						title: '数量不能小于1',
						'icon': 'none'
					});
					return;
				}
				this.num--
				this.$emit('change', {
					num: this.num,
					cartId: this.goodsId,
				})
			},
			add() {
				// 确保maxNum是数字类型
				const maxNum = parseInt(this.maxNum) || 9999999999;
				
				// 检查库存是否为0
				if (maxNum <= 0) {
					uni.showToast({
						title: '商品库存不足',
						'icon': 'none'
					});
					return;
				}
				
				// 检查数量是否超出库存
				if (this.num >= maxNum) {
					uni.showToast({
						title: '数量不能大于库存',
						'icon': 'none'
					});
					return;
				}
				
				this.num++
				this.$emit('change', {
					num: this.num,
					cartId: this.goodsId,
				})
			}
		},
		watch: {
			quantity: {
				handler(newVal, oldVal) {
					// 处理变化，但要考虑库存限制
					const maxNum = parseInt(this.maxNum) || 0;
					if (maxNum <= 0) {
						this.num = 0;
					} else {
						this.num = newVal;
					}
				},
				immediate: true // 立即执行
			},
			maxNum: {
				handler(newVal, oldVal) {
					// 当库存变化时，确保数量不超过库存
					const maxNum = parseInt(newVal) || 0;
					if (maxNum <= 0) {
						this.num = 0;
					} else if (this.num > maxNum) {
						this.num = maxNum;
					} else if (this.num === 0) {
						// 如果库存大于0但数量为0，设置为1
						this.num = 1;
					}
				},
				immediate: true
			}
		},
		created() {
			// 在组件创建时立即检查库存
			this.$nextTick(() => {
				const maxNum = parseInt(this.maxNum) || 0;
				if (maxNum <= 0) {
					this.num = 0;
				}
			});
		},
		computed: {
			isOutOfStock() {
				const maxNum = parseInt(this.maxNum) || 0;
				return maxNum <= 0;
			}
		},
		props: {
			goodsId: {
				type: [Number, String],
			},

			quantity: {
				type: [Number, String],
				default: 1
			},
			maxNum: {
				type: [Number, String],
				default: 9999999999
			},
			isSetMax: {
				type: Boolean,
				default: false
			},
		}
	}
</script>

<style>
	.ccMyNum {
		clear: both;
	}

	.numBox {
		display: flex;
	}

	.stock {
		line-height: 70rpx;
		color: #999;
		font-size: 24rpx;
		height: 70rpx;
		margin-left: 20rpx;
	}

	.stock text {
		padding: 0 5rpx;
	}

	.ccMyNum-title {
		font-size: 28rpx;
		color: #999;
	}

	.ccMyNumBox {
		display: flex;
		border: 1rpx solid #e5e5e5;
		width: 160rpx;
		font-size: 28rpx;
	}

	.ccMyNumBox text {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: #666;
	}

	.ccMyNumBox view {
		flex: 1;
		border-left: 1rpx solid #e5e5e5;
		border-right: 1rpx solid #e5e5e5;
		text-align: center;
		line-height: 50rpx;
	}
	
	/* 缺货状态样式 */
	.ccMyNumBox.disabled {
		opacity: 0.5;
		background-color: #f5f5f5;
	}
	
	.ccMyNumBox text.disabled {
		color: #ccc !important;
		cursor: not-allowed;
	}
	
	.stock.out-of-stock {
		color: #ff4d4f;
	}
</style>